<template>
    <div>
        <!--学习笔记开始-->
        <div class="public_content_right_l pr-10 pull-left w-630 hr-sr-gray2">
            <div class="public_card">
                <div class="public_card_title bg-img-card fcolor-white">
                    <span class="fsize-18 pl-15">学习笔记</span> /
                    <a href="javascript:;" class="fcolor-white">更多</a>
                </div>
                <ul class="public_card_text_content" id="content">
                  <li class="w-all mr-5 pt-15 pb-15 hr-sb-f5f5f5">
                    <a href="ipam_home_study_note_detail.html">
                      <div class=" hr-s-dfdfdf h-all pull-left w-100 mr-15">
                        <div class="w-all h-all over-h">
                            <img src="@/assets/img/index_book1.jpg" class="di-b h-all center-block" alt="图书图片">
                  
                        </div>
                      </div>
                      <div class="public_card_text_lr_txt">
                        <div class="mb-20">参加党章党规的学习笔记</div>
                        <div class="public_card_text_lr_txt_content fcolor-99">作者：胡中慧</div>
                        <div class="public_card_text_lr_txt_content fcolor-99">地点：三门峡市 灵宝县</div>
                        <div class="public_card_text_lr_txt_content fcolor-99">时间：2017-12-12</div>
                        <div class="mt-20">
                            <span class="w-100 h-30 lh-30 pull-right fsize-14 public_button_stroke-red">笔记详情</span>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
            </div>
        </div>
        <div class="public_content_right_r pull-right w-280 slide_r_news">
          <div>
            <div class="public_card_title">
                <span class="fsize-16">热点问题</span>
                <!--<a href="javascript:;">&nbsp;更多&nbsp;>></a>-->
            </div>
            <ol class="public_card_content news_newsranking">
                <li>
                    <a href="../../../News/ipam_news_detail/article_id/250.html">
                        2018年第一大队支部会员会学习计划            </a>
                </li><li>
                    <a href="../../../News/ipam_news_detail/article_id/249.html">
                        大厅服务            </a>
                </li><li>
                    <a href="../../../News/ipam_news_detail/article_id/248.html">
                        大厅服务流程            </a>
                </li><li>
                    <a href="../../../News/ipam_news_detail/article_id/54.html">
                        习近平：深入贯彻新时代党的强军思想 把人民海军全面建成世界一流海军            </a>
                </li><li>
                    <a href="../../../News/ipam_news_detail/article_id/56.html">
                        习近平在三门峡考察            </a>
                </li><li>
                    <a href="../../../News/ipam_news_detail/article_id/77.html">
                        人民日报评论员：一以贯之全面从严治党            </a>
                </li>    </ol>
          </div>            
          <div class="mt-20">
              <div class="public_card_title">
                  <span class="fsize-16">党建学习资料</span>
              </div>
              <!--轮播开始-->
              <div class="news_carousel newspaper_carousel h-200 po-re mt-15"> <!--384 760-->
                  <div class="bd">
                    <div class="tempWrap" style="overflow:hidden; position:relative;">
                      <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide>
                          <a class="see-details" href="../../ipam_material_info/material_id/168.html">
                            <img src="@/assets/img/5ae9366230306.jpg">
                            <div class="center-text mt-5 material_over_point w-100">atnc学习资料</div>
                          </a>
                          <a class="see-details" href="../../ipam_material_info/material_id/168.html">
                            <img src="@/assets/img/5ae9366230306.jpg">
                            <div class="center-text mt-5 material_over_point w-100">atnc学习资料</div>
                          </a>
                        </swiper-slide>
                        <swiper-slide>
                          <a class="see-details" href="../../ipam_material_info/material_id/168.html">
                            <img src="@/assets/img/5ae9366230306.jpg">
                            <div class="center-text mt-5 material_over_point w-100">atnc学习资料</div>
                          </a>
                          <a class="see-details" href="../../ipam_material_info/material_id/168.html">
                            <img src="@/assets/img/5ae9366230306.jpg">
                            <div class="center-text mt-5 material_over_point w-100">atnc学习资料</div>
                          </a>
                        </swiper-slide>
                      </swiper>
                    </div>
                  </div>
              </div>
              <!--轮播结束-->
          </div>
          <div class="mt-20">
              <div class="public_card_title">
                  <span class="fsize-16">视频资料库</span>
              </div>
              <!--轮播开始-->
              <div class="news_carousel newspaper_carousel h-200 po-re mt-15"> <!--384 760-->
                  <div class="bd">
                    <div class="tempWrap" style="overflow:hidden; position:relative;">
                      <swiper :options="swiperOption" ref="mySwiper">
                        <swiper-slide>
                          <a class="see-details">
                            <img src="@/assets/img/5ae9353b083ac.jpg">
                            <span class="di-ib w-280">学习资料整理第二卷内容速览</span>
                          </a>
                        </swiper-slide>
                        <swiper-slide>
                          <a class="see-details">
                            <img src="@/assets/img/5ae9353b083ac.jpg">
                            <span class="di-ib w-280">学习资料整理第二卷内容速览</span>
                          </a>
                        </swiper-slide>
                      </swiper>
                    </div>
                  </div>
              </div>
              <!--轮播结束-->
          </div>
        </div>
    </div>
</template>

<script>
    import 'swiper/dist/css/swiper.min.css';
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        components: { 
            swiper, 
            swiperSlide 
        },
        data() {
          return {
            swiperOption: { 
             	slidesPerView: 'auto', 
             	centeredSlides: true, 
             	paginationClickable: true,
              pagination : '.swiper-pagination',
              paginationType: 'bullets',
             	autoplay: true,
             	loop:true,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                }
          	}
          }
        },
        computed: {   
          swiper() { 
            // return this.$refs.mySwiper.swiper; 
          } 
        }
    }
</script>

<style scoped>
.public_card_text_lr_txt {
    height: 162px;
    box-sizing: border-box;
    /* margin-left: 110px; */
    padding: 6px 16px 12px 12px;
    font-size: 14px;
    color: #333;
}
.public_button_stroke-red {
    display: inline-block;
    border: solid 1px #ff3032;
    border-radius: 4px;
    text-align: center;
    color: #ff3032;
}
ul.public_card_content, ol.public_card_content {
    padding-left: 22px;
}
ol.news_newsranking li {
    line-height: 31px;
}
ol.public_card_content > li {
    display: list-item;
    list-style: decimal!important;
    width: 100%;
    vertical-align: top;
}
.public_card_content > li {
    font-size: 14px;
}
.public_card_content a {
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.see-details {
  display: inline-block;
  margin-right: 10px;
}
.swiper-container {
  text-align: center;
}
.di-ib {
  position: absolute;
  display: inline-block;
  /* width: 280px; */
  height: 40px;
  line-height: 22px;
  background: linear-gradient(to top, #000, transparent);
  color: #fff;
  text-align: center;
  bottom: 0;
  left: 0;
}
</style>